<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SinmaJS 完整功能演示</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        h1, h2, h3 {
            color: #333;
        }
        h1 {
            text-align: center;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 1.2em;
        }
        .module-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            border-left: 5px solid #4CAF50;
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .demo-item {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .demo-item h4 {
            margin-top: 0;
            color: #4CAF50;
        }
        .input-group {
            margin: 10px 0;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .input-group input, .input-group textarea, .input-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            margin: 5px 5px 5px 0;
            transition: background 0.3s;
        }
        .btn:hover {
            background: #45a049;
        }
        .btn-secondary {
            background: #2196F3;
        }
        .btn-secondary:hover {
            background: #1976D2;
        }
        .result {
            background: #e8f5e8;
            border: 1px solid #4CAF50;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            min-height: 20px;
            font-family: monospace;
        }
        .error {
            background: #ffebee;
            border-color: #f44336;
            color: #d32f2f;
        }
        .tabs {
            display: flex;
            border-bottom: 2px solid #e0e0e0;
            margin-bottom: 20px;
        }
        .tab {
            padding: 15px 25px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
            font-weight: bold;
        }
        .tab:hover {
            background: #f5f5f5;
        }
        .tab.active {
            border-bottom-color: #4CAF50;
            background: #e8f5e8;
            color: #2e7d32;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .emoji {
            font-size: 1.2em;
            margin-right: 8px;
        }
        .feature-badge {
            display: inline-block;
            background: #ff5722;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            margin-left: 8px;
            font-weight: bold;
        }
        .new-badge {
            background: #ff5722;
        }
        .original-badge {
            background: #2196F3;
        }
        code {
            background: #f1f1f1;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: Consolas, monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 SinmaJS 完整功能演示</h1>
        <p class="subtitle">专为中文开发者设计的JavaScript工具函数集合 - 全功能展示</p>

        <div class="tabs">
            <div class="tab active" onclick="showTab('original')">
                <span class="emoji">🏠</span>原有功能模块<span class="original-badge feature-badge">稳定版</span>
            </div>
            <div class="tab" onclick="showTab('new')">
                <span class="emoji">🚀</span>扩展功能模块<span class="new-badge feature-badge">v1.1.0</span>
            </div>
        </div>

        <!-- 原有功能模块 -->
        <div id="original" class="tab-content active">
            <div class="module-section">
                <h2><span class="emoji">🔍</span>验证模块 (Validator)</h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>手机号验证</h4>
                        <div class="input-group">
                            <input type="text" id="phone-input" placeholder="输入手机号码" value="13812345678">
                            <button class="btn" onclick="validatePhone()">验证手机号</button>
                        </div>
                        <div id="phone-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>邮箱验证</h4>
                        <div class="input-group">
                            <input type="text" id="email-input" placeholder="输入邮箱地址" value="test@example.com">
                            <button class="btn" onclick="validateEmail()">验证邮箱</button>
                        </div>
                        <div id="email-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>身份证验证</h4>
                        <div class="input-group">
                            <input type="text" id="idcard-input" placeholder="输入身份证号码" value="110101199001011234">
                            <button class="btn" onclick="validateIdCard()">验证身份证</button>
                        </div>
                        <div id="idcard-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>银行卡验证</h4>
                        <div class="input-group">
                            <input type="text" id="bankcard-input" placeholder="输入银行卡号" value="6222020200002200002">
                            <button class="btn" onclick="validateBankCard()">验证银行卡</button>
                        </div>
                        <div id="bankcard-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">📝</span>字符串模块 (String)</h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>字符串格式化</h4>
                        <div class="input-group">
                            <input type="text" id="string-input" placeholder="输入文本" value="Hello World 测试">
                            <button class="btn" onclick="formatString()">转大写</button>
                            <button class="btn btn-secondary" onclick="formatStringLower()">转小写</button>
                            <button class="btn" onclick="capitalizeString()">首字母大写</button>
                        </div>
                        <div id="string-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>随机字符串生成</h4>
                        <div class="input-group">
                            <input type="number" id="random-length" placeholder="长度" value="8" min="1" max="50">
                            <button class="btn" onclick="generateRandomString()">生成随机字符串</button>
                        </div>
                        <div id="random-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>字符串截断</h4>
                        <div class="input-group">
                            <input type="text" id="truncate-input" placeholder="输入长文本" value="这是一个很长的文本用来测试截断功能">
                            <input type="number" id="truncate-length" placeholder="截断长度" value="10" min="1">
                            <button class="btn" onclick="truncateString()">截断文本</button>
                        </div>
                        <div id="truncate-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>拼音转换</h4>
                        <div class="input-group">
                            <input type="text" id="pinyin-input" placeholder="输入中文" value="北京欢迎您">
                            <button class="btn" onclick="convertToPinyin()">转拼音</button>
                            <button class="btn btn-secondary" onclick="convertToPinyinFirst()">首字母</button>
                        </div>
                        <div id="pinyin-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">🔢</span>数字模块 (Number)</h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>货币格式化</h4>
                        <div class="input-group">
                            <input type="number" id="money-input" placeholder="输入金额" value="1234.56" step="0.01">
                            <button class="btn" onclick="formatMoney()">千分位格式化</button>
                            <button class="btn btn-secondary" onclick="formatMoneyChinese()">中文货币</button>
                            <button class="btn" onclick="formatMoneySimplified()">万亿简化</button>
                        </div>
                        <div id="money-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>精确计算</h4>
                        <div class="input-group">
                            <input type="number" id="calc-a" placeholder="数字A" value="0.1" step="0.01">
                            <input type="number" id="calc-b" placeholder="数字B" value="0.2" step="0.01">
                            <button class="btn" onclick="preciseAdd()">精确加法</button>
                            <button class="btn btn-secondary" onclick="preciseSubtract()">精确减法</button>
                        </div>
                        <div id="calc-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>随机数生成</h4>
                        <div class="input-group">
                            <input type="number" id="random-min" placeholder="最小值" value="1">
                            <input type="number" id="random-max" placeholder="最大值" value="100">
                            <button class="btn" onclick="generateRandomNumber()">生成随机数</button>
                        </div>
                        <div id="random-number-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>数字转中文</h4>
                        <div class="input-group">
                            <input type="number" id="chinese-num-input" placeholder="输入数字" value="12345">
                            <button class="btn" onclick="numberToChinese()">转中文数字</button>
                            <button class="btn btn-secondary" onclick="testLargeNumber()">测试大数</button>
                        </div>
                        <div id="chinese-num-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">📅</span>日期模块 (Date)</h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>日期格式化</h4>
                        <div class="input-group">
                            <input type="datetime-local" id="date-input">
                            <select id="date-format">
                                <option value="YYYY-MM-DD">YYYY-MM-DD</option>
                                <option value="YYYY年MM月DD日">YYYY年MM月DD日</option>
                                <option value="MM/DD/YYYY">MM/DD/YYYY</option>
                                <option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</option>
                            </select>
                            <button class="btn" onclick="formatDate()">格式化日期</button>
                        </div>
                        <div id="date-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>年龄计算</h4>
                        <div class="input-group">
                            <input type="date" id="birthday-input" value="1990-01-01">
                            <button class="btn" onclick="calculateAge()">计算年龄</button>
                        </div>
                        <div id="age-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>时间戳转换</h4>
                        <div class="input-group">
                            <button class="btn" onclick="getCurrentTimestamp()">获取当前时间戳</button>
                            <button class="btn btn-secondary" onclick="timestampToDate()">时间戳转日期</button>
                        </div>
                        <div id="timestamp-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>相对时间</h4>
                        <div class="input-group">
                            <input type="number" id="relative-hours" placeholder="小时前" value="2">
                            <button class="btn" onclick="getRelativeTime()">几小时前</button>
                        </div>
                        <div id="relative-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">📊</span>数组模块 (Array)</h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>数组去重</h4>
                        <div class="input-group">
                            <input type="text" id="array-input" placeholder="输入数组 (逗号分隔)" value="1,2,2,3,3,4,5">
                            <button class="btn" onclick="uniqueArray()">数组去重</button>
                        </div>
                        <div id="array-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>数组扁平化</h4>
                        <div class="input-group">
                            <textarea id="nested-array-input" placeholder="输入嵌套数组 (JSON格式)" rows="3">[1, [2, 3], [4, [5, 6]], 7]</textarea>
                            <button class="btn" onclick="flattenArray()">扁平化</button>
                        </div>
                        <div id="flatten-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>数组分块</h4>
                        <div class="input-group">
                            <input type="text" id="chunk-array-input" placeholder="输入数组" value="1,2,3,4,5,6,7,8,9">
                            <input type="number" id="chunk-size" placeholder="块大小" value="3" min="1">
                            <button class="btn" onclick="chunkArray()">分块处理</button>
                        </div>
                        <div id="chunk-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>数组随机排序</h4>
                        <div class="input-group">
                            <input type="text" id="shuffle-input" placeholder="输入数组" value="A,B,C,D,E,F">
                            <button class="btn" onclick="shuffleArray()">随机排序</button>
                        </div>
                        <div id="shuffle-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">🎯</span>对象模块 (Object)</h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>对象深拷贝</h4>
                        <div class="input-group">
                            <textarea id="object-input" placeholder="输入JSON对象" rows="3">{"name": "张三", "age": 25, "hobbies": ["读书", "游泳"]}</textarea>
                            <button class="btn" onclick="cloneObject()">深拷贝</button>
                        </div>
                        <div id="clone-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>对象合并</h4>
                        <div class="input-group">
                            <textarea id="merge-obj1" placeholder="对象1" rows="2">{"a": 1, "b": 2}</textarea>
                            <textarea id="merge-obj2" placeholder="对象2" rows="2">{"b": 3, "c": 4}</textarea>
                            <button class="btn" onclick="mergeObjects()">合并对象</button>
                        </div>
                        <div id="merge-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>对象属性提取</h4>
                        <div class="input-group">
                            <textarea id="extract-object" placeholder="输入对象" rows="2">{"name": "张三", "age": 25, "city": "北京", "hobby": "读书"}</textarea>
                            <input type="text" id="extract-keys" placeholder="提取的键 (逗号分隔)" value="name,age">
                            <button class="btn" onclick="extractProperties()">提取属性</button>
                        </div>
                        <div id="extract-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>对象比较</h4>
                        <div class="input-group">
                            <textarea id="compare-obj1" placeholder="对象1" rows="2">{"a": 1, "b": 2}</textarea>
                            <textarea id="compare-obj2" placeholder="对象2" rows="2">{"a": 1, "b": 2}</textarea>
                            <button class="btn" onclick="compareObjects()">比较对象</button>
                        </div>
                        <div id="compare-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">🇨🇳</span>中文模块 (Chinese)</h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>数据脱敏</h4>
                        <div class="input-group">
                            <input type="text" id="mask-input" placeholder="输入敏感信息" value="13812345678">
                            <select id="mask-type">
                                <option value="phone">手机号</option>
                                <option value="idcard">身份证</option>
                                <option value="email">邮箱</option>
                                <option value="name">姓名</option>
                            </select>
                            <button class="btn" onclick="maskData()">数据脱敏</button>
                        </div>
                        <div id="mask-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>简繁转换</h4>
                        <div class="input-group">
                            <input type="text" id="convert-text" placeholder="输入中文文本" value="简体中文转换测试">
                            <button class="btn" onclick="convertToTraditional()">转繁体</button>
                            <button class="btn btn-secondary" onclick="convertToSimplified()">转简体</button>
                        </div>
                        <div id="convert-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>金额大写</h4>
                        <div class="input-group">
                            <input type="number" id="amount-input" placeholder="输入金额" value="1234.56" step="0.01">
                            <button class="btn" onclick="amountToChinese()">转大写金额</button>
                        </div>
                        <div id="amount-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>汉字信息</h4>
                        <div class="input-group">
                            <input type="text" id="chinese-info-input" placeholder="输入汉字" value="北京" maxlength="10">
                            <button class="btn" onclick="getChineseInfo()">获取汉字信息</button>
                        </div>
                        <div id="chinese-info-result" class="result"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增功能模块 -->
        <div id="new" class="tab-content">
            <div class="module-section">
                <h2><span class="emoji">🔒</span>加密解密模块 (Crypto) <span class="new-badge feature-badge">新增</span></h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>Base64 编码/解码</h4>
                        <div class="input-group">
                            <input type="text" id="base64-input" placeholder="输入文本" value="Hello 世界">
                            <button class="btn" onclick="base64Encode()">Base64编码</button>
                            <button class="btn btn-secondary" onclick="base64Decode()">Base64解码</button>
                        </div>
                        <div id="base64-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>MD5 哈希</h4>
                        <div class="input-group">
                            <input type="text" id="md5-input" placeholder="输入文本" value="SinmaJS">
                            <button class="btn" onclick="generateMD5()">生成MD5</button>
                        </div>
                        <div id="md5-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>密码生成</h4>
                        <div class="input-group">
                            <input type="number" id="password-length" placeholder="密码长度" value="12" min="4" max="50">
                            <label><input type="checkbox" id="include-symbols" checked> 包含符号</label>
                            <button class="btn" onclick="generatePassword()">生成密码</button>
                        </div>
                        <div id="password-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>URL 编码/解码</h4>
                        <div class="input-group">
                            <input type="text" id="url-input" placeholder="输入URL" value="Hello 世界 123">
                            <button class="btn" onclick="urlEncode()">URL编码</button>
                            <button class="btn btn-secondary" onclick="urlDecode()">URL解码</button>
                        </div>
                        <div id="url-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">📊</span>JSON处理模块 (JSON) <span class="new-badge feature-badge">新增</span></h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>路径操作</h4>
                        <div class="input-group">
                            <textarea id="json-object" placeholder="输入JSON对象" rows="4">{"user": {"profile": {"name": "张三", "age": 25}, "settings": {"theme": "dark"}}}</textarea>
                            <input type="text" id="json-path" placeholder="输入路径" value="user.profile.name">
                            <button class="btn" onclick="getByPath()">获取值</button>
                            <button class="btn btn-secondary" onclick="setByPath()">设置值</button>
                        </div>
                        <div id="json-path-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>JSON格式化</h4>
                        <div class="input-group">
                            <textarea id="json-format-input" placeholder="输入JSON字符串" rows="3">{"name":"张三","age":25,"hobbies":["读书","游泳"]}</textarea>
                            <button class="btn" onclick="formatJSON()">格式化JSON</button>
                            <button class="btn btn-secondary" onclick="compressJSON()">压缩JSON</button>
                        </div>
                        <div id="json-format-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>深度克隆</h4>
                        <div class="input-group">
                            <textarea id="deep-clone-input" placeholder="输入复杂对象" rows="3">{"data": [1, 2, {"nested": "value"}], "fn": null}</textarea>
                            <button class="btn" onclick="performDeepClone()">深度克隆</button>
                        </div>
                        <div id="deep-clone-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>对象比较</h4>
                        <div class="input-group">
                            <textarea id="compare-json1" placeholder="对象1" rows="2">{"a": 1, "b": [2, 3]}</textarea>
                            <textarea id="compare-json2" placeholder="对象2" rows="2">{"a": 1, "b": [2, 3]}</textarea>
                            <button class="btn" onclick="compareJSON()">深度比较</button>
                        </div>
                        <div id="compare-json-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">📁</span>文件处理模块 (File) <span class="new-badge feature-badge">新增</span></h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>文件信息检测</h4>
                        <div class="input-group">
                            <input type="text" id="filename-input" placeholder="输入文件名" value="document.pdf">
                            <button class="btn" onclick="getFileInfo()">获取文件信息</button>
                        </div>
                        <div id="file-info-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>文件大小格式化</h4>
                        <div class="input-group">
                            <input type="number" id="file-size-input" placeholder="文件大小(字节)" value="1048576">
                            <button class="btn" onclick="formatFileSize()">格式化大小</button>
                        </div>
                        <div id="file-size-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>文件下载</h4>
                        <div class="input-group">
                            <input type="text" id="download-content" placeholder="文件内容" value="Hello, SinmaJS!">
                            <input type="text" id="download-filename" placeholder="文件名" value="test.txt">
                            <button class="btn" onclick="downloadFile()">下载文件</button>
                        </div>
                        <div id="download-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>文件类型判断</h4>
                        <div class="input-group">
                            <select id="file-type-select">
                                <option value="image.jpg">image.jpg</option>
                                <option value="video.mp4">video.mp4</option>
                                <option value="audio.mp3">audio.mp3</option>
                                <option value="document.pdf">document.pdf</option>
                            </select>
                            <button class="btn" onclick="checkFileType()">检测类型</button>
                        </div>
                        <div id="file-type-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">💾</span>缓存模块 (Cache) <span class="new-badge feature-badge">新增</span></h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>内存缓存</h4>
                        <div class="input-group">
                            <input type="text" id="cache-key" placeholder="缓存键" value="user-data">
                            <input type="text" id="cache-value" placeholder="缓存值" value="张三的用户信息">
                            <button class="btn" onclick="setMemoryCache()">设置缓存</button>
                            <button class="btn btn-secondary" onclick="getMemoryCache()">获取缓存</button>
                        </div>
                        <div id="cache-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>TTL缓存</h4>
                        <div class="input-group">
                            <input type="text" id="ttl-key" placeholder="缓存键" value="temp-data">
                            <input type="text" id="ttl-value" placeholder="缓存值" value="临时数据">
                            <input type="number" id="ttl-time" placeholder="过期时间(秒)" value="5" min="1">
                            <button class="btn" onclick="setTTLCache()">设置TTL缓存</button>
                        </div>
                        <div id="ttl-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>函数缓存</h4>
                        <div class="input-group">
                            <input type="number" id="memo-input" placeholder="输入数字" value="5">
                            <button class="btn" onclick="testMemoize()">计算平方(带缓存)</button>
                            <button class="btn btn-secondary" onclick="clearMemoCache()">清除缓存</button>
                        </div>
                        <div id="memo-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>本地存储缓存</h4>
                        <div class="input-group">
                            <input type="text" id="local-key" placeholder="存储键" value="local-data">
                            <input type="text" id="local-value" placeholder="存储值" value="本地存储数据">
                            <button class="btn" onclick="setLocalCache()">存储到本地</button>
                            <button class="btn btn-secondary" onclick="getLocalCache()">从本地获取</button>
                        </div>
                        <div id="local-cache-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">🔄</span>转换器模块 (Convert) <span class="new-badge feature-badge">新增</span></h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>类型转换</h4>
                        <div class="input-group">
                            <input type="text" id="convert-value" placeholder="输入值" value="123.45">
                            <select id="convert-type">
                                <option value="number">转数字</option>
                                <option value="string">转字符串</option>
                                <option value="boolean">转布尔</option>
                                <option value="array">转数组</option>
                            </select>
                            <button class="btn" onclick="convertType()">类型转换</button>
                        </div>
                        <div id="convert-type-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>进制转换</h4>
                        <div class="input-group">
                            <input type="number" id="base-number" placeholder="输入十进制数" value="255">
                            <button class="btn" onclick="convertToBinary()">转二进制</button>
                            <button class="btn btn-secondary" onclick="convertToHex()">转十六进制</button>
                            <button class="btn" onclick="convertToOctal()">转八进制</button>
                        </div>
                        <div id="base-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>颜色转换</h4>
                        <div class="input-group">
                            <input type="number" id="rgb-r" placeholder="R" value="255" min="0" max="255">
                            <input type="number" id="rgb-g" placeholder="G" value="0" min="0" max="255">
                            <input type="number" id="rgb-b" placeholder="B" value="0" min="0" max="255">
                            <button class="btn" onclick="rgbToHex()">RGB转HEX</button>
                        </div>
                        <div id="color-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>温度转换</h4>
                        <div class="input-group">
                            <input type="number" id="temp-input" placeholder="温度值" value="25" step="0.1">
                            <select id="temp-from">
                                <option value="celsius">摄氏度</option>
                                <option value="fahrenheit">华氏度</option>
                                <option value="kelvin">开尔文</option>
                            </select>
                            <button class="btn" onclick="convertTemperature()">转换温度</button>
                        </div>
                        <div id="temp-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>单位转换</h4>
                        <div class="input-group">
                            <input type="number" id="unit-value" placeholder="数值" value="100" step="0.01">
                            <select id="unit-type">
                                <option value="length">长度: 米转英尺</option>
                                <option value="weight">重量: 千克转磅</option>
                                <option value="distance">距离: 千米转英里</option>
                            </select>
                            <button class="btn" onclick="convertUnit()">单位转换</button>
                        </div>
                        <div id="unit-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>字节大小转换</h4>
                        <div class="input-group">
                            <input type="number" id="bytes-input" placeholder="字节数" value="1048576">
                            <button class="btn" onclick="convertBytes()">格式化大小</button>
                        </div>
                        <div id="bytes-result" class="result"></div>
                    </div>
                </div>
            </div>

            <div class="module-section">
                <h2><span class="emoji">🖼️</span>图片处理模块 (Image) <span class="new-badge feature-badge">新增</span></h2>
                <div class="demo-grid">
                    <div class="demo-item">
                        <h4>图片上传预览</h4>
                        <div class="input-group">
                            <input type="file" id="image-upload" accept="image/*" onchange="previewImage()">
                            <button class="btn" onclick="compressImage()">压缩图片</button>
                        </div>
                        <div id="image-preview" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>图片滤镜</h4>
                        <div class="input-group">
                            <select id="filter-type">
                                <option value="grayscale">灰度</option>
                                <option value="sepia">棕褐色</option>
                                <option value="blur">模糊</option>
                                <option value="brightness">亮度</option>
                            </select>
                            <button class="btn" onclick="applyFilter()">应用滤镜</button>
                        </div>
                        <div id="filter-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>图片信息</h4>
                        <div class="input-group">
                            <button class="btn" onclick="getImageInfo()">获取图片信息</button>
                        </div>
                        <div id="image-info-result" class="result"></div>
                    </div>

                    <div class="demo-item">
                        <h4>图片裁剪</h4>
                        <div class="input-group">
                            <input type="number" id="crop-x" placeholder="起始X坐标" value="0" min="0">
                            <input type="number" id="crop-y" placeholder="起始Y坐标" value="0" min="0">
                            <input type="number" id="crop-width" placeholder="宽度" value="200" min="1">
                            <input type="number" id="crop-height" placeholder="高度" value="200" min="1">
                            <button class="btn" onclick="cropImage()">裁剪图片</button>
                        </div>
                        <div id="crop-result" class="result"></div>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align: center; margin-top: 30px; padding: 20px; background-color: #f9f9f9; border-radius: 10px;">
            <h3>🎯 功能总览</h3>
            <p><strong>核心功能模块 (14个):</strong> 验证、字符串、数字、日期、数组、对象、函数、URL、DOM、中文、颜色、存储、设备、请求</p>
            <p><strong>扩展功能模块 (6个):</strong> 加密解密、JSON处理、文件处理、缓存管理、图片处理、类型转换</p>
            <p><strong>总计:</strong> 20个功能模块，200+ 实用函数，支持多种使用环境</p>
            <p>💡 <strong>设计理念:</strong> 借鉴 Lodash + Hutool，专为中文开发者优化</p>
        </div>
    </div>

    <!-- 引入 SinmaJS -->
    <script src="../javascript/sinma.js?v=1.1.0"></script>

    <script>
        // 初始化日期输入框
        document.getElementById('date-input').value = new Date().toISOString().slice(0, 16);

        // 标签页切换
        function showTab(tabId) {
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

            event.target.closest('.tab').classList.add('active');
            document.getElementById(tabId).classList.add('active');
        }

        // 原有功能演示函数

        // 验证模块
        function validatePhone() {
            const phone = document.getElementById('phone-input').value;
            const result = sinma.isPhone(phone);
            const compatible = sinma.isPhonenum(phone); // 测试向后兼容
            document.getElementById('phone-result').innerHTML = `
                验证结果: ${result ? '✓ 有效' : '✗ 无效'}<br>
                向后兼容测试: ${compatible ? '✓ 通过' : '✗ 失败'}
            `;
        }

        function validateEmail() {
            const email = document.getElementById('email-input').value;
            const result = sinma.isEmail(email);
            document.getElementById('email-result').innerHTML = `验证结果: ${result ? '✓ 有效' : '✗ 无效'}`;
        }

        function validateIdCard() {
            const idcard = document.getElementById('idcard-input').value;
            const result = sinma.isIdCard(idcard);
            document.getElementById('idcard-result').innerHTML = `验证结果: ${result ? '✓ 有效' : '✗ 无效'}`;
        }

        function validateBankCard() {
            const bankcard = document.getElementById('bankcard-input').value;
            const result = sinma.isBankCard(bankcard);
            document.getElementById('bankcard-result').innerHTML = `验证结果: ${result ? '✓ 有效' : '✗ 无效'}`;
        }

        // 字符串模块
        function formatString() {
            const text = document.getElementById('string-input').value;
            const result = text.toUpperCase(); // 使用原生方法
            document.getElementById('string-result').innerHTML = `大写结果: ${result}`;
        }

        function formatStringLower() {
            const text = document.getElementById('string-input').value;
            const result = text.toLowerCase(); // 使用原生方法
            document.getElementById('string-result').innerHTML = `小写结果: ${result}`;
        }

        function capitalizeString() {
            const text = document.getElementById('string-input').value;
            const result = sinma.capitalize(text);
            document.getElementById('string-result').innerHTML = `首字母大写: ${result}`;
        }

        function generateRandomString() {
            const length = parseInt(document.getElementById('random-length').value);
            const result = sinma.randomString(length);
            document.getElementById('random-result').innerHTML = `随机字符串: ${result}`;
        }

        function truncateString() {
            const text = document.getElementById('truncate-input').value;
            const length = parseInt(document.getElementById('truncate-length').value);
            const result = sinma.truncate(text, length);
            document.getElementById('truncate-result').innerHTML = `截断结果: ${result}`;
        }

        function convertToPinyin() {
            const text = document.getElementById('pinyin-input').value;
            const result = sinma.toPinyin(text);
            document.getElementById('pinyin-result').innerHTML = `拼音转换: ${result}`;
        }

        function convertToPinyinFirst() {
            const text = document.getElementById('pinyin-input').value;
            const result = sinma.toPinyinFirst(text);
            document.getElementById('pinyin-result').innerHTML = `拼音首字母: ${result}`;
        }

        // 数字模块
        function formatMoney() {
            const money = parseFloat(document.getElementById('money-input').value);
            const result = sinma.formatMoney(money);
            document.getElementById('money-result').innerHTML = `千分位格式: ${result}`;
        }

        function formatMoneyChinese() {
            const money = parseFloat(document.getElementById('money-input').value);
            const result = sinma.formatMoneyToChinese(money);
            document.getElementById('money-result').innerHTML = `中文货币: ${result}`;
        }

        function formatMoneySimplified() {
            const money = parseFloat(document.getElementById('money-input').value);
            const result = sinma.cutmoney(money);
            document.getElementById('money-result').innerHTML = `万亿简化: ${result}`;
        }

        function preciseAdd() {
            const a = parseFloat(document.getElementById('calc-a').value);
            const b = parseFloat(document.getElementById('calc-b').value);
            const result = sinma.add(a, b);
            document.getElementById('calc-result').innerHTML = `精确加法: ${a} + ${b} = ${result}`;
        }

        function preciseSubtract() {
            const a = parseFloat(document.getElementById('calc-a').value);
            const b = parseFloat(document.getElementById('calc-b').value);
            const result = sinma.subtract(a, b);
            document.getElementById('calc-result').innerHTML = `精确减法: ${a} - ${b} = ${result}`;
        }

        function generateRandomNumber() {
            const min = parseInt(document.getElementById('random-min').value);
            const max = parseInt(document.getElementById('random-max').value);
            const result = sinma.random(min, max); // 修正函数名
            document.getElementById('random-number-result').innerHTML = `随机数: ${result}`;
        }

        function numberToChinese() {
            const num = parseInt(document.getElementById('chinese-num-input').value);
            const result = sinma.numberToChinese(num);
            document.getElementById('chinese-num-result').innerHTML = `中文数字: ${result}`;
        }

        function testLargeNumber() {
            const tests = [
                123,
                1234,
                12345,
                123456,
                1234567,
                12345678,
                123456789,
                1234567890
            ];
            let html = '大数转换测试:<br>';
            tests.forEach(num => {
                html += `${num.toLocaleString()} = ${sinma.numberToChinese(num)}<br>`;
            });
            document.getElementById('chinese-num-result').innerHTML = html;
        }

        // 日期模块
        function formatDate() {
            const dateValue = document.getElementById('date-input').value;
            const format = document.getElementById('date-format').value;
            const date = new Date(dateValue);
            const result = sinma.formatDate(date, format);
            document.getElementById('date-result').innerHTML = `格式化结果: ${result}`;
        }

        function calculateAge() {
            const birthday = document.getElementById('birthday-input').value;
            const result = sinma.calculateAge(birthday); // 修正函数名
            document.getElementById('age-result').innerHTML = `年龄: ${result} 岁`;
        }

        function getCurrentTimestamp() {
            const result = Date.now(); // 使用原生方法
            document.getElementById('timestamp-result').innerHTML = `当前时间戳: ${result}`;
        }

        function timestampToDate() {
            const timestamp = Date.now();
            const result = new Date(timestamp).toLocaleString(); // 使用原生方法
            document.getElementById('timestamp-result').innerHTML = `时间戳转日期: ${result}`;
        }

        function getRelativeTime() {
            const hours = parseInt(document.getElementById('relative-hours').value);
            const pastTime = new Date(Date.now() - hours * 60 * 60 * 1000);
            const result = sinma.timeAgo(pastTime); // 修正函数名
            document.getElementById('relative-result').innerHTML = `相对时间: ${result}`;
        }

        // 数组模块
        function uniqueArray() {
            const input = document.getElementById('array-input').value;
            const array = input.split(',').map(item => item.trim());
            const result = sinma.unique(array);
            document.getElementById('array-result').innerHTML = `去重结果: [${result.join(', ')}]`;
        }

        function flattenArray() {
            try {
                const input = document.getElementById('nested-array-input').value;
                const array = JSON.parse(input);
                const result = sinma.flattenDeep(array); // 修正函数名
                document.getElementById('flatten-result').innerHTML = `扁平化结果: [${result.join(', ')}]`;
            } catch (e) {
                document.getElementById('flatten-result').innerHTML = `错误: 请输入有效的JSON数组`;
            }
        }

        function chunkArray() {
            const input = document.getElementById('chunk-array-input').value;
            const size = parseInt(document.getElementById('chunk-size').value);
            const array = input.split(',').map(item => item.trim());
            const result = sinma.chunk(array, size);
            document.getElementById('chunk-result').innerHTML = `分块结果: ${JSON.stringify(result)}`;
        }

        function shuffleArray() {
            const input = document.getElementById('shuffle-input').value;
            const array = input.split(',').map(item => item.trim());
            const result = sinma.shuffle([...array]); // 创建副本避免修改原数组
            document.getElementById('shuffle-result').innerHTML = `随机排序: [${result.join(', ')}]`;
        }

        // 对象模块
        function cloneObject() {
            try {
                const input = document.getElementById('object-input').value;
                const obj = JSON.parse(input);
                const result = sinma.clone(obj);
                document.getElementById('clone-result').innerHTML = `
                    深拷贝结果: ${JSON.stringify(result, null, 2)}<br>
                    是否为同一对象: ${obj === result ? '是' : '否'}
                `;
            } catch (e) {
                document.getElementById('clone-result').innerHTML = `错误: 请输入有效的JSON对象`;
            }
        }

        function mergeObjects() {
            try {
                const obj1 = JSON.parse(document.getElementById('merge-obj1').value);
                const obj2 = JSON.parse(document.getElementById('merge-obj2').value);
                const result = sinma.merge(obj1, obj2);
                document.getElementById('merge-result').innerHTML = `合并结果: ${JSON.stringify(result, null, 2)}`;
            } catch (e) {
                document.getElementById('merge-result').innerHTML = `错误: 请输入有效的JSON对象`;
            }
        }

        function extractProperties() {
            try {
                const obj = JSON.parse(document.getElementById('extract-object').value);
                const keys = document.getElementById('extract-keys').value.split(',').map(k => k.trim());
                const result = sinma.pick(obj, keys);
                document.getElementById('extract-result').innerHTML = `提取结果: ${JSON.stringify(result, null, 2)}`;
            } catch (e) {
                document.getElementById('extract-result').innerHTML = `错误: 请输入有效的JSON对象`;
            }
        }

        function compareObjects() {
            try {
                const obj1 = JSON.parse(document.getElementById('compare-obj1').value);
                const obj2 = JSON.parse(document.getElementById('compare-obj2').value);
                const result = sinma.isEqual(obj1, obj2);
                document.getElementById('compare-result').innerHTML = `比较结果: ${result ? '相等' : '不相等'}`;
            } catch (e) {
                document.getElementById('compare-result').innerHTML = `错误: 请输入有效的JSON对象`;
            }
        }

        // 中文模块
        function maskData() {
            const data = document.getElementById('mask-input').value;
            const type = document.getElementById('mask-type').value;
            let result;
            switch (type) {
                case 'phone':
                    result = sinma.maskPhone(data);
                    break;
                case 'idcard':
                    result = sinma.maskIdCard(data);
                    break;
                case 'email':
                    result = sinma.maskEmail(data);
                    break;
                case 'name':
                    result = sinma.maskName(data);
                    break;
                default:
                    result = data;
            }
            document.getElementById('mask-result').innerHTML = `脱敏结果: ${result}`;
        }

        function convertToTraditional() {
            const text = document.getElementById('convert-text').value;
            const result = sinma.simplifiedToTraditional(text); // 修正函数名
            document.getElementById('convert-result').innerHTML = `繁体转换: ${result}`;
        }

        function convertToSimplified() {
            const text = document.getElementById('convert-text').value;
            const result = sinma.traditionalToSimplified(text); // 修正函数名
            document.getElementById('convert-result').innerHTML = `简体转换: ${result}`;
        }

        function amountToChinese() {
            const amount = parseFloat(document.getElementById('amount-input').value);
            const result = sinma.amountToChinese(amount);
            document.getElementById('amount-result').innerHTML = `大写金额: ${result}`;
        }

        function getChineseInfo() {
            const text = document.getElementById('chinese-info-input').value;
            const charCount = sinma.getChineseCharCount(text);
            const pinyinResult = sinma.toPinyin(text);
            document.getElementById('chinese-info-result').innerHTML = `
                汉字个数: ${charCount}<br>
                拼音: ${pinyinResult}<br>
                字符总数: ${text.length}
            `;
        }

        // 新增功能演示函数

        // 加密解密模块
        function base64Encode() {
            const text = document.getElementById('base64-input').value;
            try {
                const result = sinma.base64Encode(text);
                document.getElementById('base64-result').innerHTML = `Base64编码: ${result}`;
            } catch (e) {
                document.getElementById('base64-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function base64Decode() {
            const text = document.getElementById('base64-input').value;
            try {
                const result = sinma.base64Decode(text);
                document.getElementById('base64-result').innerHTML = `Base64解码: ${result}`;
            } catch (e) {
                document.getElementById('base64-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function generateMD5() {
            const text = document.getElementById('md5-input').value;
            const result = sinma.md5(text);
            document.getElementById('md5-result').innerHTML = `MD5哈希: ${result}`;
        }

        function generatePassword() {
            const length = parseInt(document.getElementById('password-length').value);
            const includeSymbols = document.getElementById('include-symbols').checked;
            const result = sinma.generatePassword(length, {
                includeUppercase: true,
                includeLowercase: true,
                includeNumbers: true,
                includeSymbols: includeSymbols
            });
            document.getElementById('password-result').innerHTML = `生成的密码: ${result}`;
        }

        function urlEncode() {
            const text = document.getElementById('url-input').value;
            const result = sinma.urlEncode(text);
            document.getElementById('url-result').innerHTML = `URL编码: ${result}`;
        }

        function urlDecode() {
            const text = document.getElementById('url-input').value;
            try {
                const result = sinma.urlDecode(text);
                document.getElementById('url-result').innerHTML = `URL解码: ${result}`;
            } catch (e) {
                document.getElementById('url-result').innerHTML = `错误: ${e.message}`;
            }
        }

        // JSON处理模块
        function getByPath() {
            try {
                const obj = JSON.parse(document.getElementById('json-object').value);
                const path = document.getElementById('json-path').value;
                const result = sinma.getByPath(obj, path);
                document.getElementById('json-path-result').innerHTML = `路径值: ${JSON.stringify(result)}`;
            } catch (e) {
                document.getElementById('json-path-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function setByPath() {
            try {
                const obj = JSON.parse(document.getElementById('json-object').value);
                const path = document.getElementById('json-path').value;
                sinma.setByPath(obj, path, '新设置的值');
                document.getElementById('json-path-result').innerHTML = `设置后对象: ${JSON.stringify(obj, null, 2)}`;
            } catch (e) {
                document.getElementById('json-path-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function formatJSON() {
            try {
                const jsonStr = document.getElementById('json-format-input').value;
                const obj = JSON.parse(jsonStr);
                const result = sinma.formatJson(obj, 2);
                document.getElementById('json-format-result').innerHTML = `<pre>${result}</pre>`;
            } catch (e) {
                document.getElementById('json-format-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function compressJSON() {
            try {
                const jsonStr = document.getElementById('json-format-input').value;
                const obj = JSON.parse(jsonStr);
                const result = sinma.toJsonString(obj);
                document.getElementById('json-format-result').innerHTML = `压缩结果: ${result}`;
            } catch (e) {
                document.getElementById('json-format-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function performDeepClone() {
            try {
                const obj = JSON.parse(document.getElementById('deep-clone-input').value);
                const result = sinma.deepClone(obj);
                document.getElementById('deep-clone-result').innerHTML = `
                    克隆结果: ${JSON.stringify(result, null, 2)}<br>
                    引用相等: ${obj === result ? '是' : '否'}
                `;
            } catch (e) {
                document.getElementById('deep-clone-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function compareJSON() {
            try {
                const obj1 = JSON.parse(document.getElementById('compare-json1').value);
                const obj2 = JSON.parse(document.getElementById('compare-json2').value);
                const result = sinma.isEqual(obj1, obj2);
                document.getElementById('compare-json-result').innerHTML = `深度比较结果: ${result ? '相等' : '不相等'}`;
            } catch (e) {
                document.getElementById('compare-json-result').innerHTML = `错误: ${e.message}`;
            }
        }

        // 文件处理模块
        function getFileInfo() {
            const filename = document.getElementById('filename-input').value;
            const extension = sinma.getFileExtension(filename);
            const name = sinma.getFileName(filename);
            const mimeType = sinma.getMimeType(filename);
            const isImage = sinma.isImageFile(filename);

            document.getElementById('file-info-result').innerHTML = `
                文件名: ${name}<br>
                扩展名: ${extension}<br>
                MIME类型: ${mimeType}<br>
                是否为图片: ${isImage ? '是' : '否'}
            `;
        }

        function formatFileSize() {
            const size = parseInt(document.getElementById('file-size-input').value);
            const result = sinma.formatFileSize(size);
            document.getElementById('file-size-result').innerHTML = `格式化大小: ${result}`;
        }

        function downloadFile() {
            const content = document.getElementById('download-content').value;
            const filename = document.getElementById('download-filename').value;
            try {
                sinma.downloadFile(content, filename);
                document.getElementById('download-result').innerHTML = `文件已开始下载: ${filename}`;
            } catch (e) {
                document.getElementById('download-result').innerHTML = `错误: ${e.message}`;
            }
        }

        function checkFileType() {
            const filename = document.getElementById('file-type-select').value;
            const isImage = sinma.isImageFile(filename);
            const isVideo = sinma.isVideoFile(filename);
            const isAudio = sinma.isAudioFile(filename);
            const isDocument = sinma.isDocumentFile(filename);

            document.getElementById('file-type-result').innerHTML = `
                图片文件: ${isImage ? '是' : '否'}<br>
                视频文件: ${isVideo ? '是' : '否'}<br>
                音频文件: ${isAudio ? '是' : '否'}<br>
                文档文件: ${isDocument ? '是' : '否'}
            `;
        }

        // 缓存模块
        function setMemoryCache() {
            const key = document.getElementById('cache-key').value;
            const value = document.getElementById('cache-value').value;
            sinma.setMemoryCache(key, value);
            document.getElementById('cache-result').innerHTML = `缓存已设置: ${key} = ${value}`;
        }

        function getMemoryCache() {
            const key = document.getElementById('cache-key').value;
            const result = sinma.getMemoryCache(key);
            document.getElementById('cache-result').innerHTML = `缓存值: ${result || '未找到'}`;
        }

        function setTTLCache() {
            const key = document.getElementById('ttl-key').value;
            const value = document.getElementById('ttl-value').value;
            const ttl = parseInt(document.getElementById('ttl-time').value) * 1000; // 转换为毫秒
            sinma.setMemoryCache(key, value, ttl);
            document.getElementById('ttl-result').innerHTML = `TTL缓存已设置，${ttl/1000}秒后过期`;

            // 演示过期检查
            setTimeout(() => {
                const expired = sinma.getMemoryCache(key);
                if (!expired) {
                    document.getElementById('ttl-result').innerHTML += '<br>缓存已过期';
                }
            }, ttl + 100);
        }

        let memoizedFunction;
        let callCount = 0;

        function testMemoize() {
            if (!memoizedFunction) {
                memoizedFunction = sinma.memoize(function(n) {
                    callCount++;
                    return n * n;
                });
            }

            const input = parseInt(document.getElementById('memo-input').value);
            const result = memoizedFunction(input);
            document.getElementById('memo-result').innerHTML = `
                计算结果: ${input}² = ${result}<br>
                函数调用次数: ${callCount}
            `;
        }

        function clearMemoCache() {
            memoizedFunction = null;
            callCount = 0;
            document.getElementById('memo-result').innerHTML = '缓存已清除';
        }

        function setLocalCache() {
            const key = document.getElementById('local-key').value;
            const value = document.getElementById('local-value').value;
            sinma.setLocal(key, value); // 修正函数名
            document.getElementById('local-cache-result').innerHTML = `本地存储已设置: ${key} = ${value}`;
        }

        function getLocalCache() {
            const key = document.getElementById('local-key').value;
            const result = sinma.getLocal(key); // 修正函数名
            document.getElementById('local-cache-result').innerHTML = `本地存储值: ${result || '未找到'}`;
        }

        // 转换器模块
        function convertType() {
            const value = document.getElementById('convert-value').value;
            const type = document.getElementById('convert-type').value;
            let result;

            switch (type) {
                case 'number':
                    result = sinma.toNumber(value, 0);
                    break;
                case 'string':
                    result = sinma.toString(value, '');
                    break;
                case 'boolean':
                    result = sinma.toBoolean(value, false);
                    break;
                case 'array':
                    result = sinma.toArray(value, []);
                    break;
            }

            document.getElementById('convert-type-result').innerHTML = `
                原值: ${value} (${typeof value})<br>
                转换结果: ${Array.isArray(result) ? JSON.stringify(result) : result} (${typeof result})
            `;
        }

        function convertToBinary() {
            const num = parseInt(document.getElementById('base-number').value);
            const result = sinma.decimalToBinary(num);
            document.getElementById('base-result').innerHTML = `二进制: ${num} = ${result}`;
        }

        function convertToHex() {
            const num = parseInt(document.getElementById('base-number').value);
            const result = sinma.decimalToHex(num);
            document.getElementById('base-result').innerHTML = `十六进制: ${num} = ${result}`;
        }

        function convertToOctal() {
            const num = parseInt(document.getElementById('base-number').value);
            const result = sinma.decimalToOctal(num);
            document.getElementById('base-result').innerHTML = `八进制: ${num} = ${result}`;
        }

        function rgbToHex() {
            const r = parseInt(document.getElementById('rgb-r').value);
            const g = parseInt(document.getElementById('rgb-g').value);
            const b = parseInt(document.getElementById('rgb-b').value);
            const result = sinma.rgbToHex(r, g, b);

            document.getElementById('color-result').innerHTML = `
                RGB(${r}, ${g}, ${b}) = ${result}<br>
                <div style="width: 50px; height: 20px; background-color: ${result}; border: 1px solid #ccc; display: inline-block; margin-top: 5px;"></div>
            `;
        }

        function convertTemperature() {
            const temp = parseFloat(document.getElementById('temp-input').value);
            const fromUnit = document.getElementById('temp-from').value;
            let results = {};

            if (fromUnit === 'celsius') {
                results.fahrenheit = sinma.celsiusToFahrenheit(temp);
                results.kelvin = sinma.celsiusToKelvin(temp);
                document.getElementById('temp-result').innerHTML = `
                    ${temp}°C = ${results.fahrenheit.toFixed(1)}°F = ${results.kelvin.toFixed(1)}K
                `;
            } else if (fromUnit === 'fahrenheit') {
                results.celsius = sinma.fahrenheitToCelsius(temp);
                results.kelvin = sinma.celsiusToKelvin(results.celsius);
                document.getElementById('temp-result').innerHTML = `
                    ${temp}°F = ${results.celsius.toFixed(1)}°C = ${results.kelvin.toFixed(1)}K
                `;
            } else if (fromUnit === 'kelvin') {
                results.celsius = sinma.kelvinToCelsius(temp);
                results.fahrenheit = sinma.celsiusToFahrenheit(results.celsius);
                document.getElementById('temp-result').innerHTML = `
                    ${temp}K = ${results.celsius.toFixed(1)}°C = ${results.fahrenheit.toFixed(1)}°F
                `;
            }
        }

        function convertUnit() {
            const value = parseFloat(document.getElementById('unit-value').value);
            const type = document.getElementById('unit-type').value;
            let result;

            switch (type) {
                case 'length':
                    result = sinma.metersToFeet(value);
                    document.getElementById('unit-result').innerHTML = `${value} 米 = ${result.toFixed(2)} 英尺`;
                    break;
                case 'weight':
                    result = sinma.kilogramsToPounds(value);
                    document.getElementById('unit-result').innerHTML = `${value} 千克 = ${result.toFixed(2)} 磅`;
                    break;
                case 'distance':
                    result = sinma.kilometersToMiles(value);
                    document.getElementById('unit-result').innerHTML = `${value} 千米 = ${result.toFixed(2)} 英里`;
                    break;
            }
        }

        function convertBytes() {
            const bytes = parseInt(document.getElementById('bytes-input').value);
            const result = sinma.bytesToSize(bytes);
            document.getElementById('bytes-result').innerHTML = `${bytes} bytes = ${result}`;
        }

        // 图片处理模块
        let currentImage = null;

        function previewImage() {
            const file = document.getElementById('image-upload').files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        currentImage = img;
                        document.getElementById('image-preview').innerHTML = `
                            <p>图片已上传: ${file.name}</p>
                            <img src="${e.target.result}" style="max-width: 200px; max-height: 200px;">
                        `;
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }

        async function compressImage() {
            if (!currentImage) {
                document.getElementById('image-preview').innerHTML = '请先上传图片';
                return;
            }

            try {
                const compressed = await sinma.compressImage(currentImage, { quality: 0.7, maxWidth: 800 });
                const url = URL.createObjectURL(compressed);
                document.getElementById('image-preview').innerHTML += `
                    <p>压缩后 (质量: 70%, 最大宽度: 800px):</p>
                    <img src="${url}" style="max-width: 200px; max-height: 200px;">
                    <p>原大小: ${currentImage.naturalWidth} x ${currentImage.naturalHeight}</p>
                    <p>压缩后大小: ${compressed.size} bytes</p>
                `;
            } catch (e) {
                document.getElementById('image-preview').innerHTML += `<p>压缩失败: ${e.message}</p>`;
            }
        }

        async function applyFilter() {
            if (!currentImage) {
                document.getElementById('filter-result').innerHTML = '请先上传图片';
                return;
            }

            const filterType = document.getElementById('filter-type').value;
            try {
                const filtered = await sinma.applyFilter(currentImage, filterType);
                const url = URL.createObjectURL(filtered);
                document.getElementById('filter-result').innerHTML = `
                    <p>应用${filterType}滤镜:</p>
                    <img src="${url}" style="max-width: 200px; max-height: 200px;">
                `;
            } catch (e) {
                document.getElementById('filter-result').innerHTML = `滤镜应用失败: ${e.message}`;
            }
        }

        function getImageInfo() {
            if (!currentImage) {
                document.getElementById('image-info-result').innerHTML = '请先上传图片';
                return;
            }

            document.getElementById('image-info-result').innerHTML = `
                尺寸: ${currentImage.naturalWidth} x ${currentImage.naturalHeight} 像素<br>
                宽高比: ${(currentImage.naturalWidth / currentImage.naturalHeight).toFixed(2)}<br>
                总像素: ${(currentImage.naturalWidth * currentImage.naturalHeight).toLocaleString()}
            `;
        }

        async function cropImage() {
            if (!currentImage) {
                document.getElementById('crop-result').innerHTML = '请先上传图片';
                return;
            }

            const x = parseInt(document.getElementById('crop-x').value) || 0;
            const y = parseInt(document.getElementById('crop-y').value) || 0;
            const width = parseInt(document.getElementById('crop-width').value) || 200;
            const height = parseInt(document.getElementById('crop-height').value) || 200;

            // 验证裁剪参数
            if (x < 0 || y < 0 || width <= 0 || height <= 0) {
                document.getElementById('crop-result').innerHTML = '<p style="color: red;">裁剪参数无效</p>';
                return;
            }

            if (x + width > currentImage.naturalWidth || y + height > currentImage.naturalHeight) {
                document.getElementById('crop-result').innerHTML =
                    `<p style="color: red;">裁剪区域超出图片范围<br>
                    图片尺寸: ${currentImage.naturalWidth} x ${currentImage.naturalHeight}<br>
                    裁剪区域: (${x}, ${y}) - (${x + width}, ${y + height})</p>`;
                return;
            }

            try {
                document.getElementById('crop-result').innerHTML = '<p>正在裁剪图片...</p>';

                const cropped = await sinma.cropImage(currentImage, x, y, width, height);

                // 验证返回的Blob对象
                if (!cropped || !(cropped instanceof Blob)) {
                    throw new Error('裁剪返回了无效的Blob对象');
                }

                // 检查Blob大小
                if (cropped.size === 0) {
                    throw new Error('裁剪生成的图片为空');
                }

                const url = URL.createObjectURL(cropped);
                document.getElementById('crop-result').innerHTML = `
                    <p>裁剪成功！(起始: ${x}, ${y} | 尺寸: ${width} x ${height} | 大小: ${(cropped.size / 1024).toFixed(1)}KB)</p>
                    <img src="${url}" style="max-width: 200px; max-height: 200px; border: 1px solid #ddd;"
                         onerror="this.parentElement.innerHTML='<p style=&quot;color: red;&quot;>图片显示失败</p>'">
                    <br><a href="${url}" download="cropped-image.jpg" class="btn btn-secondary" style="margin-top: 10px;">下载裁剪图片</a>
                `;
            } catch (e) {
                console.error('图片裁剪错误:', e);
                document.getElementById('crop-result').innerHTML = `
                    <p style="color: red;">裁剪失败: ${e.message}</p>
                    <p style="color: #666; font-size: 12px;">
                        请确保：<br>
                        1. 已正确上传图片<br>
                        2. 裁剪参数在有效范围内<br>
                        3. 浏览器支持Canvas API
                    </p>
                `;
            }
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🎉 SinmaJS 完整功能演示页面已加载');
            console.log('📋 可用功能模块:', Object.keys(sinma));
            console.log('🔖 版本信息:', sinma.version);
        });
    </script>
</body>
</html>